<style type="text/css">
    div.rainbowRightWidget {
        margin:0 20px;
    }
    div#rainbow_image_label_widget {
        padding:10px;
        background:url("{{ STATIC_URL }}commons/background/8f1f1_background.png") white;
        border-radius:2px;
    }
    div#rainbow_image_label ul {
        margin:0;
        padding:0;
        list-style-type:none;
    }
    div#rainbow_image_label ul li {
        margin:0 10px 5px 0;
        height:24px;
        line-height:24px;
        padding:5px;
        float:left;
        background:black;
        color:#f8f8ff;
        max-width:257px;
        overflow:hidden;
        border-radius:2px;
    }
    div#rainbow_image_label_input_widget {
        height:24px;
        line-height:24px;
    }
    div#rainbow_image_label_input_widget label {
        position:absolute;
        padding:0 10px;
        color:#000000;
    }
    div#rainbow_image_label_input_widget input#id_rainbow_image_label {
        width:100%;
        border:0 solid white;
        outline:none;
        height:24px;
        line-height:24px;
        color:#808080;
        font-size:16px;
        background:url("{{ STATIC_URL }}commons/background/8f1f1_background.png") white;
    }
</style>
<div id="rainbow_image_label_widget" class="rainbowRightWidget">
    <div id="rainbow_image_label">
        <ul>
        </ul>
    </div>
    <div id="rainbow_image_label_input_widget">
        <label for="id_rainbow_image_label">添加标签</label>
        <input type="text" name="rainbow_image_label" id="id_rainbow_image_label"/>
    </div>
</div>
<div id="rainbow_image_scope_widget" class="rainbowRightWidget" style="margin-top:20px;">
    <div style="height:40px;line-height:40px;color:white;">
        <div class="selected" style="width:10px;height:10px;border:1px solid green;padding:5px;background:white;margin:10px 0;float:left;">
            {% if form.scope.value == 0 %}
                <div style="background:green;width:10px;height:10px;"></div>
            {% else %}
                <div style="background:white;width:10px;height:10px;"></div>
            {% endif %}
            <input type="hidden" name="rainbow_image_scope" value="{{ form.scope.value }}"/>
        </div>
        <label>&nbsp;&nbsp;&nbsp;&nbsp;仅自己可见</label>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div#rainbow_image_scope_widget").find("div.selected").click(function(){
                var scopeInput = $(this).find("input[name='rainbow_image_scope']");
                var scope = scopeInput.val();
                var selectedMark = $(this);
                var toScope = 0;
                if (scope == 0) {
                    selectedMark.find("div").css({
                        "background-color":"white"
                    });
                    toScope = 2;

                } else {
                    selectedMark.find("div").css({
                        "background-color":"green"
                    });
                    toScope = 0;
                }
                scopeInput.val(toScope);
                var scopeSelect = $("div#rainbow_image_action_widget").find("form").find("select#id_scope");
                scopeSelect.find("option").removeAttr("selected");
                scopeSelect.find("option[value='" + toScope + "']").attr("selected", "selected");
            });
        });
    </script>
</div>
<script type="text/javascript">
    var jquery = $, jQuery;
    (function($){
        $.fn.extend({
            rainbowPhotoFrameLabelAdd:function(options){
                var defaults = {
                    label:""
                };
                var opts = $.extend(defaults, options);
                var labelContainer = $(this);
                var label = opts.label;
                if (!$.isEmptyObject(label)){
                    var pWidget = labelContainer.parent().parent();
                    var labelInput = pWidget.find("input#id_rainbow_image_label");
                    labelInput.val("");
                    var labelItem = $("<li/>");
                    var labelDiv = $("<div/>");
                    labelDiv.css({
                        "max-width":243,
                        "overflow":"hidden"
                    });
                    labelDiv.text(label);
                    var deletedButton = $("<a/>");
                    deletedButton.attr({
                        "href":"#"
                    });
                    deletedButton.css({
                        float:"right",
                        color:"white"
                    });
                    deletedButton.text("x");
                    labelItem.append(deletedButton);
                    labelItem.append(labelDiv);
                    labelContainer.append(labelItem);
                    labelItem.css({
                        width:labelDiv.outerWidth() + 14
                    });
                    pWidget.css({
                        height:labelInput.offset().top - pWidget.offset().top + labelInput.outerHeight() - 10
                    });
                    deletedButton.click(function(){
                        $(this).parent().remove();
                        pWidget.css({
                            height:labelInput.offset().top - pWidget.offset().top + labelInput.outerHeight() - 10
                        });
                        var l = labelInput.parent().find("label[for='" + labelInput.attr("id") + "']");
                        l.css({
                            top:labelInput.offset().top
                        });
                    });
                }
            }
        });
    })(jquery);

    $(document).ready(function(){
        var labelInput = $("div#rainbow_image_label_input_widget").find("input#id_rainbow_image_label");
        var interval = null;

        labelInput.focusin(function(){
            if (null != interval) {
                window.clearInterval(interval);
            }
            labelInput.parent().find("label[for='" + $(this).attr("id") + "']").hide();
            var keyFunction = function(event, labelInput){
                var keyCode = event.keyCode;
                var value = labelInput.val();
                var p = labelInput.parent().parent();
                var labelContainer = p.find("div#rainbow_image_label").find("ul");
                if (keyCode == 13) {
                    if (!$.isEmptyObject(value)) {
                        labelInput.val("");
                        //添加新标签
                        labelContainer.rainbowPhotoFrameLabelAdd({label:value});
                    }
                } else if (keyCode == 8) {
                    if ($.isEmptyObject(value)) {
                        var items = labelContainer.find("li");
                        if (items.size() > 0) {
                            items[items.size() - 1].remove();
                            p.css({
                                height:labelInput.offset().top - p.offset().top + labelInput.outerHeight() - 10
                            });
                        }
                    }
                }
            };
            if ($.browser.chrome) {
                $(this).keydown(function(event){
                    keyFunction(event, $(this));
                });
            } else {
                $(this).keypress(function(event){
                    keyFunction(event, $(this));
                });
            }
        });
        labelInput.focusout(function(event){
            var value = $(this).val();
            if ($.isEmptyObject(value)) {
                if (null != interval) {
                    window.clearInterval(interval);
                }
                var l = $(this).parent().find("label[for='" + $(this).attr("id") + "']");
                l.css({
                    top:$(this).offset().top
                });
                l.show();
                if ($.browser.chrome) {
                    $(this).unbind("keydown");
                } else {
                    $(this).unbind("keypress");
                }
            } else {
                interval = window.setInterval(function(){
                    //添加新标签
                    var labelContainer = labelInput.parent().parent().find("div#rainbow_image_label").find("ul");
                    labelContainer.rainbowPhotoFrameLabelAdd({label:value});
                    window.clearInterval(interval);
                    interval = null;
                }, 2000)
            }
        });
    });
</script>